<template>
  <div class="home">
    <div class="back" @click="back"> <van-icon name="arrow-left" color="#ffffff" size="16px" /> </div>
    <div id="container"> </div>
    <div id="panel"></div>
    <!-- <van-popup v-model="showTip" :close-on-click-overlay="false" style="width:70%;background:transparent">
      <div class="warp">
        <h3 class="title">详细信息</h3>
        <van-cell-group>
          <van-cell title="状态" :value="showInfoPopup.status" />
          <van-cell title="病房" :value="showInfoPopup.bed" />
          <van-cell title="项目" :value="showInfoPopup.project" />
        </van-cell-group>
        <p class="footer" v-if="!isOrder">
          <van-button @click="showTip = false" size="small">返&emsp;回</van-button>
          <van-button :loading="btnLoading" type="primary" size="small" v-if="showInfoPopup.status === '待检'"
            @click="gogogo" color="rgb(19, 181, 177)">去检查</van-button>
        </p>
        <p class="footer_2" v-else>
          <van-button type="primary" size="small" @click="submit" color="rgb(19, 181, 177)">我已经完成
          </van-button>
        </p>
      </div>
    </van-popup>
    <van-action-sheet v-model="choseMap" :actions="actions" @select="onSelect" /> -->
  </div>
</template>

<script>
  import AMap from "AMap"
  const star = require("../assets/star.png")
  const redImage = require("../assets/red.png")
  const yellowImage = require("../assets/yellow.png")
  const green = require("../assets/green.png")
  export default {
    name: "container",
    data() {
      return {
        showTip: false,
        clickPoint: null,
        info: {
          red: {
            status: '待检',
            bed: 'F14 T3床',
            project: '胸水'
          },
          yellow: {
            status: '检查中',
            bed: 'F22 103床',
            project: '腹水'
          },
          green: {
            status: '已完成',
            bed: 'F12',
            project: '心脏'
          }
        },
        showInfoPopup: {},
        btnLoading: false,
        choseMap: false,
        isOrder: false,
        actions: [{
          name: "高德地图"
        }, {
          name: "百度地图"
        }, ]
      }
    },
    mounted() {
      this.MapInit()
    },
    methods: {
      back(){
        this.$router.back()
      },
      submit() {
        this.isOrder = false
        this.showInfoPopup.status = "已完成"
        this.clickPoint.setIcon(green)
        this.clickPoint.setLabel({
          content: `<div class='greeninfo'>${this.showInfoPopup.status}：${this.showInfoPopup.bed} ${this.showInfoPopup.project}</div>`, //设置文本标注内容
        })
        this.info.red = {
          ...this.showInfoPopup
        }
      },
      onSelect(item) {
        this.choseMap = false;
        this.$toast(item.name);
      },
      gogogo() {
        this.btnLoading = true
        setTimeout(() => {
          this.isOrder = true
          this.btnLoading = false
          this.showInfoPopup.status = "检查中"
          this.clickPoint.setIcon(yellowImage)
          this.clickPoint.setLabel({
            content: `<div class='yellowinfo'>${this.showInfoPopup.status}：${this.showInfoPopup.bed} ${this.showInfoPopup.project}</div>`, //设置文本标注内容
          })
          this.$dialog.confirm({
              allowHtml: true,
              title: '提示',
              message: `<p>您已接到此待检订单，请尽快去<span style="color:red">${this.showInfoPopup.bed}</span>去做<span style="color:red">${this.showInfoPopup.project}</span>项目检查，是否需要导航？</p>`,
            })
            .then(() => {
              this.choseMap = true
            })
            .catch(() => {});
        }, 500)

      },
      showInfo(e, status) {
        this.clickPoint = e.target
        this.showInfoPopup = {
          ...this.info[status]
        }
        this.showTip = true
        // 
      },
      MapInit() {
        const map = new AMap.Map("container", {
          resizeEnable: true,
          center: [114.275145, 30.583167],
          zoom: 18,
        });

        const walking = new AMap.Walking({
          map: map,
          panel: "panel"
        });

        walking.search([114.275145, 30.583167], [114.274132,30.584783], function (status, result) {
          // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
          if (status === 'complete') {
            console.log('绘制步行路线完成')
          } else {
            console.log('步行路线数据查询失败' + result)
          }
        });
      },
    }
  }
</script>

<style lang='less' scoped>
  .home {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
  }
  .back{
    position: fixed;
    left: 24px;
    top: 24px;
    width: 50px;
    height: 50px;
    border-radius:50% ;
    background: #000000;
    opacity: 0.2;
    z-index: 170;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #container {
    width: 100%;
    height: 100%;
  }
  #panel{
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
    position: fixed;
    bottom: 0;
    z-index: 1000;
  }
  /deep/.amap-marker-label {
    border: none;
    background: transparent;
    padding: 0;
  }

  /deep/.redinfo {
    background: red;
    color: white;
    padding: 3px;
  }

  /deep/ .yellowinfo {
    background: rgba(255, 192, 0);
    color: white;
    padding: 3px;
  }

  /deep/.greeninfo {
    background: rgba(0, 176, 80, 1);
    color: white;
    padding: 3px;
  }

  .warp {
    width: 100%;
    border-radius: 16px;
    background: white;
    overflow: hidden;
  }

  .title {
    text-align: center;
    padding: 8px 0;
  }

  /deep/.van-popup__close-icon--top-right {
    top: 7px
  }

  .footer {
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
  }

  .footer_2 {
    padding: 10px 16px;
    text-align: right;
  }
</style>